// 1 匹配出字符串中的所有数字
let str1 = '需成本的陈杰1223想念摄像机9088性能车型';
let nums = [...str1].filter(item => !Number.isNaN(parseInt(item))).join('');
// console.log(nums);

// 2 将所有div中的内容变成红色
let divs = document.querySelectorAll('div');
let reg = new RegExp('age', 'g');
divs.forEach(item => {
    item.innerHTML = item.innerHTML.replace(reg, search => {
        console.log('serch:', search);
        return `<span style="color:red;">${search}</span>`
    })
})
// console.log(divs);

//3 选择符使用
let tel = '020-12345678';
let telReg = /(012|020)\-\d{6}/;
let telReg2 = /[7]/;
// console.log('tel:', telReg.test(tel), tel.match(telReg));
// console.log('tel2:', telReg2.test(tel), tel.match(telReg2), tel[tel.match(telReg2).index])


// 4 原子表和原子组使用选择符
let str3 = '22222999334456000';
console.log('29/34', str3.match(/(29|34)/g));

// 5 转译
let price = 'page is 13.45 22.99';
let priceReg = /\d+\.\d+/g;
console.log('price:', priceReg.test(price), price.match(priceReg));
let url = 'http://www.baidu.com';
const urlReg = /^https?:\/\/w{3}\.\w+\.(cn|com)$/;
// console.log('url:', urlReg.test(url), url.match(urlReg));



// 6 字符边界
document.querySelector("[name='mycode']").addEventListener('keyup', function() {
    let status = /^\d{6,7}$/.test(this.value);
    console.log('keyuo:', status, this.value);
    document.querySelector('.tips').innerHTML = status ? 'success' : 'fail';
});



// 7 空白元字符
let str4 ='houdunren 2022';
console.log('空白元字符:', str4.match(/[^\d\s]+/));
let telok = `    qqqq 张三:019-9999;  
                李四:090-788363737`;
console.log(telok.match(/[^:\d\-\s;a-z]+/g));

console.log(/\S/.test(' \nwxw'))



// 8 w和W元字符
let emailStr = '&&&2293188960@qq.como-obuuju';
const emailReg = /\w+@\w+\.\w+/;
console.log('w和W元字符:', emailReg.test(emailStr), emailStr.match(emailReg));

let username = 'Ae1dv vaxgs';
console.log('username:', username.match(/^[A-Z][\w\s]+/));


// 9 单行匹配模式---忽略换行符 s
let str6 = `  
    hello 11 988
    word 999
    your 2022
`;
console.log('单行匹配模式:', str6.match(/\d+/s));


// 10 匹配全字符

let tpl  = `
    <span> 
    houdnrenren
    2022hdms   
    </span>
`;


let xj = 'ab';
// console.log('ab:', xj.match(/#$%$%^%^%%^b/));
console.log(tpl.match(/<span>[\s\S]+<\/span>/));
// console.log(tpl.match(/<span>[\w\W]+<\/span>/));




// 11  i与g模式修正符
let str7 = 'HUHBbbbhkJggg';
console.log(str7.match(/[a-z]/gi));


// 12 m多行匹配模式

let tpls = `
    #1 js,200元 #
    #2 css,100元 #
    #3 ts,230元 #
    #4 html,50元 #
`;

let temp = tpls.match(/^\s*#\d+\s+.+\s+#$/gm).map(v => {
    v = v.replace(/\s*#\d+\s+/, '').replace(/\s+#$/, '');
    [na, value] = v.split(',');
    return {
        na,
        value
    }
})
console.log('m多行匹配模式:', temp);

// 13 汉字与字符属性 \u4e00-\u9fa5
let  str8 ='houdunern.com2022,后的好处,加油';
// console.log('汉字：',str8.match(/[^\s\da-z\.,]+/g))
// console.log('汉字：',str8.match(/\p{L}/gu));
// console.log('汉字：',str8.match(/\p{P}/gu))
// console.log('汉字：',str8.match(/\p{N}/gu))
// console.log('汉字：',str8.match(/\p{sc=Han}/gu))
// console.log('汉字：',str8.match(/[\u4e00-\u9fa5]/g))
// console.log('汉字：',str8.match(/[\u4e00-\u9fa5]+/g))



// 14 lastIndex作用
let str9 = 'cnsvbswwwduvbsdu123';
let reg9 = /\p{N}/gu;
// console.log(str9.match(reg9))

console.log(reg9.exec(str9));
console.log(reg9.lastIndex);
console.log(reg9.exec(str9));
console.log(reg9.lastIndex);
console.log(reg9.exec(str9));
console.log(reg9.lastIndex);
console.log(reg9.exec(str9));
console.log(reg9.lastIndex);



// 15 有效率的y模式

let string1 = '城市出境111111,22222,99999';
let resArr = [];
let reg11 = /(\d+),?/y;
reg11.lastIndex = 4;
// console.log(reg11.lastIndex);
// console.log('y模式：', reg11.exec(string1))
while ((res = reg11.exec(string1))) resArr.push(res[1]);
console.log('y模式：', resArr)


// 16 原子表使用
let date = '2022-4-15';
console.log('原子表：', date.match(/^\d{4}([-\/])(\d{1,2})\1\d{2}$/));


// 17 匹配全部标签
let body = document.body;
let regh = /<(h[1-6])>([\D\d]+)<\/\1>/gi;
body.innerHTML = body.innerHTML.replace(regh, (macth, p1, p2, p3) => {
    // console.log('h标签：', macth, p1, p2, p3);
    return '<div style="color:red;">' + macth + '</div>'
});

// 18 matchAll
let hs = body.innerHTML.matchAll(regh);
let hsArr = [];
// let hs = body.innerHTML.match(regh);
// console.log('matchAll=>', hs);
for (const interator of hs) {
    // console.log('interator:',interator );
    hsArr.push(interator[2])
}
console.table(hsArr);

// 19 不记录组编号(?:)
let string2 = 'http://www.baidu.baidu.com';
let urlReg2 = /^https?:\/\/(?:\w{3})(\.\w+)\1\.\w+$/;
console.log(string2.match(urlReg2));
// 20 原子组别名
let string3 = 'http://www.baidu.baidu.com';
let urlReg3 = /^https?:\/\/(?:\w{3})(?<dian>\.)(\w+)\1\2\.\w+$/;
console.log(string3.match(urlReg3));



// 21 $符的使用
// $`(匹配内容前) $’（匹配内容后） $&（匹配内容）
 let main = document.querySelector('.main');
 main.innerHTML = main.innerHTML.replace(/教育/g, `<a target="_blank" style="color:green;">$'$&</a>`)




 //22 断言
let before = document.querySelector('.before');
let after = document.querySelector('.after');
// 前断言
// let beforeReg= /后盾人(?=good)/g;
let beforeReg= /后盾人(?!good)/g;
before.innerHTML = before.innerHTML.replace(beforeReg, `<a style="color:blue;">$&</a>`)
// 后端断言
// let afterReg= /(?<=我是)后盾人/g;
let afterReg= /(?<!我是)后盾人/g;
after.innerHTML = after.innerHTML.replace(afterReg, `<a style="color:blue;">$&</a>`)



// 全局断言
let globalReg= /(?<!.*good.*)人人/